<template>
    <div class="app-container">
      <el-row>
        <el-col :span="24" class="top">
          <Search @handleSearch="handleSearch" :formData="formData" :formOptions="filterFormOptions"></Search>
          <Operate ref="operate" @operateAction="operateAction" @refreshItemList="getItemList" :formData="formData" :multipleSelection="multipleSelection">
            <template v-slot:operateHeader = "value">

            </template>
          </Operate>
          <Table :itemList="itemList" :formData="formData" :dictOptions="dictOptions" @handleSelectionChange="handleSelectionChange">
            <template v-slot:operateRow = "value">
              <el-button v-for="(item, index) in formData.operateList" :key="index" v-if="item.place=='row'" @click="operateAction(item, itemList[value.slotRow])" :type="item.buttonType" :plain="item.buttonType=='text'?false:true" size="small">{{item.name}}</el-button>
              <el-button v-if="($store.getters.userModel.role=='alliance') && itemList[value.slotRow].orderStatus=='WAIT_SEND'"
              @click="customRowOperateAction({'key': 'handleOutMoney', 'actionType': ''}, itemList[value.slotRow])" type="text" size="small">处理</el-button>
            </template>
          </Table>
          <pagination
            style="background: #ffffff; height: 50px"
            v-show="totalSize > 0"
            :total="totalSize"
            :page.sync="page"
            :limit.sync="size"
            @pagination="getItemList"
          />
        </el-col>
      </el-row>
      <errorDialog ref="errorDialog" :errorList="errorList"></errorDialog>
      <handleUpdate ref="handleUpdate" @confirm='getItemList'></handleUpdate>
    </div>
  </template>
  
  <script>
    import { getFieldListOptionByFormId, getFieldFormOptionByFormId, getFilterFormOptionByFormId } from '@/api/interface/form.js'
    import { getItemList, getFormData, operateActionPost } from '@/api/interface/operate.js'
    import errorDialog from '@/views/interface/form/errorDialog'
    import handleUpdate from './components/handleUpdate.vue'
  export default {
    components: { errorDialog, handleUpdate},
    data() {
      return {
        page: 1,
        size: 20,
        totalSize: 0,
        itemList: [],
        formId: '',
        formData: {},
        searchParams: {},
        filterFormOptions: {},
        fieldForm: {},
        multipleSelection: [],
        formOptions: {},
        dictOptions: {},
        errorList: []
      }
    },
    created(){
      this.formId = this.$route.meta.formModel.id
      this.getItemList()
      this.getFormData()
      this.getFilterFormOptionByFormId()
      this.getFieldFormOptionByFormId()
      this.getFieldListOptionByFormId()
    },
    methods:{
      handleSearch(searchParams){
        this.searchParams = searchParams
        this.page = 1
        this.getItemList()
      },
      handleSelectionChange(val){
        this.multipleSelection = val
      },
      customHeaderOperateAction(operate){
        this.$refs.operate.operateAction(operate)
      },
      // 自定义行内操作
      customRowOperateAction(operate, row){
        operate.place = 'row'
        this.operateAction(operate, row)
      },
      operateAction(operate, val){
        console.log('自定义操作', operate, val)
        if(operate.actionType == 'api'){
          var params = {}
          if(operate.place == 'row'){
            params.obj_id = val.id
          }else if(operate.place == 'header'){
            params.obj_ids = val
          }else{
            this.$message({
                message: '缺少位置参数',
                type: 'info'
              })
          }
          operateActionPost(this.$route.meta.formModel.url + operate.key + 'Action/', params).then((res) => {
            if(res.data.code == 10000){
              this.$message({
                message: res.data.data,
                type: 'success'
              })
              this.getItemList()
            }else if(res.data.code == 10001){
              console.log('errorList', res.data.data)
              this.errorList = res.data.data
              this.$refs.errorDialog.show()
            }
          })
          return
        }
        switch (operate.key) {
          case 'update':
            this.$router.push({name: 'Update', query: {formData: encodeURIComponent(JSON.stringify(this.formData)), rowId: val.id}})
            break;
          case 'handleOutMoney':
            this.$refs.handleUpdate.show(val.id, 'update')
            break;
          default:
              break;
        }
      },
      // 获取表单配置数据
      getFormData(){
        getFormData({formId: this.formId}).then(res=>{
          if (res.data.code == 10000) {
            this.formData = res.data.data
          }
        })
      },
      // 获取列表数据
      getItemList() {
        this.searchParams.page = this.page
        this.searchParams.size = this.size
        getItemList(this.$route.meta.formModel.url, this.searchParams).then(res => {
          if (res.data.code == 10000) {
            this.totalSize = res.data.data.total_count
            this.itemList = res.data.data.list
          }
        });
      },
      // 获取字典
      getFilterFormOptionByFormId(){
          getFilterFormOptionByFormId({
            formId: this.formId
          }).then(res=>{
            if(res.data.code == 10000){
              this.filterFormOptions = res.data.data
            }
          })
        },
      // 获取字典
      getFieldFormOptionByFormId(){
        getFieldFormOptionByFormId({
          formId: this.formId
        }).then(res=>{
          if(res.data.code == 10000){
            this.formOptions = res.data.data
          }
        })
      },
      // 获取字典
      getFieldListOptionByFormId(){
        getFieldListOptionByFormId({
          formId: this.formId
        }).then(res=>{
          if(res.data.code == 10000){
            this.dictOptions = res.data.data
          }
        })
      },
    },
  }
  </script>
  
  
  <style lang="scss" scoped>
  
  </style>
  